﻿<script id="ChapterTemplate" type="text/html">
    <div data-bind="template: {name:viewmodel.selectedTagMode().value(), foreach: tagCollection, afterRender: onRenderTagCompleted}"></div>
    <img class="picture-small" data-bind="attr: {src: src}"></img>
</script>
<!-- This is the NORMAL template -->
<script id="TagTemplate" type="text/html">
    <div class="boxed" data-bind="style:{marginTop: top,marginLeft:left,width:width,height:height}">
    <span class="translatedText">${content}</span>
    </div>
</script>
<!-- This is the HOVER template -->
<script id="TagTemplateHover" type="text/html">
    <div  id="tag-indicator" class="tag-indicator" data-bind="style:{marginTop: top,marginLeft:left,width:width,height:height}">
    </div>
    <div id="contentDiv" class="boxed" data-bind="style:{display: 'none',marginTop: top,marginLeft:hoverLeft,width:width,height:height,}">
        <span class="translatedText">${content}</span>
    </div>
</script>
<!-- This is NO TAG template-->
<script id="TagTemplateDisable" type="text/html">
    <div></div>
</script>
<script id="TranslationTemplate" type="text/html">
    <div class="transparentBoxed" data-bind="style:{marginTop: top,marginLeft:left,width:width,height:height}">
        <span class="translatedText">${content}</span>
    </div>
</script>
